<template>
	<div class="globalsearch">
		<Notice></Notice>
		<u-navbar :is-back="false">
			<view class="top flex">
				<div class="head">站内搜</div>
			</view>
		</u-navbar>
		<div class="input" @click="toInput">请输入搜索内容</div>
		<div class="line"></div>
		<u-tabs :list="tabs" :is-scroll="false" :current="tabIndex" @change="tabChange"></u-tabs>
		<z-paging ref="paging" :fixed="false" class="scroll-box" v-model="hotList" refresher-only @onRefresh="getList" v-for="(item,index) in hotList" :key="index" v-show="index==tabIndex">
			<div class="row flex" v-for="(rank,key) in item.list" :key="key" @click="toSearch(rank.url)">
				<div class="l flex">
					<span class="rank" :class="'rank-'+(key+1)">{{ key+1 }}</span>
					<span class="title">{{ rank.key_word }}</span>
				</div>
				<div class="r flex">
					<i class="icon"></i>
					<span class="hot-count">{{ rank.trending_hot }}</span>
				</div>
			</div>
			<div class="empty" v-if="item.list && !item.list.length">
				暂无数据
			</div>
		</z-paging>
	</div> 
</template>

<script>
import { hotRank } from "@/api/subject.js"
export default {
	data() {
		return {
			tabs: [
				{
					name: "B站热榜"
				},
				{
					name: "抖音热榜"
				},
				{
					name: "快手热榜"
				},
				{
					name: "微博热榜"
				}
			],
			tabIndex: 0,
			hotList: [[],[],[],[]],
			loading: true,
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		tabChange(val) {
			this.tabIndex = val;
		},
		toInput() {
			uni.navigateTo({
				url: "/pages/searchinput/searchinput"
			});
		},
		getList() {
			hotRank().then(({data})=>{
				this.hotList = data;
				this.$refs.paging[this.tabIndex].endRefresh();
			});
		},
		toSearch(val) {
			// #ifdef APP-PLUS
			plus.runtime.openURL(
				val, 
				function(err) {  
					console.log(err);  
				}
			);
			// #endif
			
			// #ifdef H5
			window.open(val);
			// #endif
		},
	}
}
</script>

<style lang="scss" scoped>
.globalsearch{
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.top{
	width: 100%;
	justify-content: center;
	box-sizing: border-box;
}
.head{
	font-weight: bold;
	font-size: 36rpx;
	line-height: 1;
	position: relative;
	z-index: 1;
	text-align: center;
	padding-top: 0;

	&::after{
		content: "";
		position: absolute;
		z-index: 1;
		left: 50%;
		transform: translateX(-50%);
		bottom: -20rpx;
		background-color: #1E62FC;
		width: 40rpx;
		height: 8rpx;
		border-radius: 4rpx;
	}
}
.input{
	margin: 40rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	border: 1rpx solid #333;
	border-radius: 10rpx;
	font-size: 30rpx;
	color: #999;
}
.line{
	height: 20rpx;
	background-color: #F2F3F7;
}
.scroll-box{
	padding: 0 0 0 20rpx;
	box-sizing: border-box;
	flex: 1;
	.row{
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.rank{
		font-size: 28rpx;
		width: 60rpx;
		text-align: center;
	}
	.rank-1{
		color: #E65441;
		font-weight: bold;
	}
	.rank-2{
		color: #E6960C;
		font-weight: bold;
	}
	.rank-3{
		color: #5090F1;
		font-weight: bold;
	}
	.title{
		font-size: 28rpx;
		flex: 1;
		// width: 400rpx;
	}
	.icon{
		width: 28rpx;
		height: 28rpx;
		background: url(./../../static/hot.png) no-repeat center/contain;
		margin-right: 10rpx;
	}
	.hot-count{
		width: max-content;
		font-size: 28rpx;
		color: #E65643;
		margin-right: 30rpx;
	}
}
.loading{
	margin: auto;
	display: block;
	margin-top: 60rpx;
}
.empty{
	text-align: center;
	margin-top: 60rpx;
}
</style>